.draggable-area {
  -webkit-app-region: drag;
  height: 50px; /* Set the height of the draggable area */
  width: 100%;
  pointer-events: none; /* Ensure that click events on other elements are not affected */
}

.non-draggable {
  -webkit-app-region: no-drag;
  pointer-events: auto;
}

.no-hover-effect:hover {
  text-decoration: none !important;
}

.fade-edges {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out;
}

.img-initial {
  @layer base {
    img {
      display: initial;
    }
  }
}

@font-face {
  font-family: 'LXGW WenKai Mono';
  src: url('@assets/fonts/LXGWWenKaiMono-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
